<template>
	<view class="content">
        <u-navbar bgColor="#fff" 
            :safeAreaInsetTop="true" :placeholder="true" :fixed="true" :shadow="true"
            @leftClick="back" title="工资详情">
        </u-navbar>

        <view class="uni-area">
            <!-- 工资发放概况 -->
            <uni-item-base class="u-m-t-30" :baseData="generalData" />

            <!-- 工资发放列表 -->
            <view class="u-m-t-40">
                <text class="u-font-32 font-bold">工资发放列表</text>
                <view v-for="(tem,ind) in page.list" :key="ind" @tap.stop="detail(tem.id)" class="u-m-t-30 member-item">
                    <view class="u-flex u-flex-wrap">
                        <view class="u-m-t-24 u-flex u-font-26" style="width:100%">
                            <text class="u-m-r-16 uni-dec-color">工资期(间)</text>
                            <text>{{tem.ffgzny?tem.ffgzny:'暂无数据源'}}</text>
                        </view>
                        <view class="u-m-t-24 u-flex u-font-26" style="width:100%">
                            <text class="u-m-r-16 uni-dec-color">发放日期</text>
                            <text>{{tem.ffrq?tem.ffrq:'暂无数据源'}}</text>
                        </view>
                        <view class="u-m-t-24 u-flex u-font-26" style="width:50%">
                            <text class="u-m-r-16 uni-dec-color">发放人数</text>
                            <text>{{tem.ffrs?tem.ffrs:0}}人</text>
                        </view>
                        <view class="u-m-t-24 u-flex u-font-26" style="width:50%">
                            <text class="u-m-r-16 uni-dec-color">发放金额</text>
                            <text>{{tem.sfgzhj?tem.sfgzhj:0}}万元</text>
                        </view>
                    </view>
                </view>
            </view>
            
            <!-- 返回顶部 -->
            <u-back-top :scroll-top="page.scrollTop" @tap="toTop"></u-back-top>
            <!-- 加载更多 -->
            <u-loadmore :status="page.status" />
        </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
                // 项目编号
                gcbh: null,  
                // 工资发放概况
                generalData:{
                    line: false,
                    title: '工资发放概况',
                    list:[
                        { filed:'disburse', title:'账户累积拨付金额', value:'0',unit:'万元' },
                        { filed:'cumtimes', title:'累积发放次数', value:'0',unit:'次' },
                        { filed:'cumstaffs', title:'累积发放人数', value:'0',unit:'人' },
                        { filed:'cumsalary', title:'累积发放金额', value:'0',unit:'万元' },
                        { filed:'balance', title:'专户余额', value:'0',unit:'万元' },
                    ]
                },
                // 分页相关参数
                paging:{
                    pageNum: 1,
                    pageSize: this.$config.pageSize,
                },
                page:{
                    scrollTop: 0,
                    status: 'nomore',
                    total: 0,
                    list: [], // 列表
                },
			}
		},


        onPageScroll(e) {
            this.page.scrollTop = e.scrollTop;
        },
        onReachBottom(){
            if( this.page.list.length < this.page.total ){
                this.paging.pageNum += 1
                this.page.status = 'loading'
                this.getWgWageFaFangList()
            }else{
                this.page.status = 'nomore'
            }
        },

		onLoad(option) {
            this.gcbh = option.id
            // 工资发放概览
            this.getWgWageOverview()
            // 工资发放列表
            this.getWgWageFaFangList()
		},

		methods: {
            // 返回
            back(){
                uni.navigateBack()
            },
            // 工资发放详情
            detail(id){
                uni.navigateTo({
                    url: '/pages/wage-bag/grant-detail?id='+id
                })
            },


            // 工资发放概览
            getWgWageOverview(){
                this.$request(this, this.$apis.wgWageOverview, {gcbh:this.gcbh}).then(res => {
                    // console.log('工资发放概览',res)
                    this.generalData.list.map((v,i)=>{
                        v.value = res[v.filed]
                    })
                }).then()
            },
            // 工资发放列表
            getWgWageFaFangList(){
                uni.showLoading({ title: '工资发放列表' })
                const prameter = Object.assign( {gcbh:this.gcbh}, this.paging )
                // console.log( '工资发放列表-参数',prameter )
                this.$request(this,this.$apis.wgWageFaFangList,prameter).then(res=>{
                    // console.log('工资发放列表',res)
                    this.page.total = res.total
                    if( res.total && res.total != 0 ){
                        this.status = 'loadmore'
                        res.data.map((v,i)=>{
                            this.page.list.push(v)
                        })
                    }else{
                        this.page.status = 'nomore'
                        uni.$u.toast('暂未查询到更多工资相关数据')
                    }
                }).then()
            },

            // 返回顶部
            toTop(){
                uni.pageScrollTo({ scrollTop: 0,  duration: 300 })
            },
		}
	}
</script>

<style scoped lang="scss">
    .content{
        // 工资发放列表
        .member-item{
            padding: 6rpx 30rpx 30rpx;
            background: #F6F7F8;
        }
    }
</style>
